<template>
  <div class="dialog">
    <!-- 这里的内容写死，就不灵活了。所以用一个占位符来站位。 -->
    <!-- 父组件在使用 子组件的时候，给子组件传递结构，传递什么结构，就展示什么结构 -->
    <!-- 这个占位符就叫做插槽 -->
    <!-- 指定了具体的名字的插槽叫做具名插槽 -->
    <!-- 第一个插槽，用于接收标题 -->
    <slot name="title"><h3>提示</h3></slot>
    <br />
    <!-- 第二个插槽，用于接收对话框的内容 -->
    <slot name="content" uname="zs" age="20"></slot>
    <br />
    <!-- 没有指定具体名字的插槽叫做默认插槽 -->
    <!-- 第三个插槽，用于接收按钮(没有指定name的插槽，它的name="default") -->
    <slot></slot>
  </div>
</template>
<script>
export default {};
</script>
<style>
.dialog {
  border: solid 3px black;
  padding: 5px;
  border-radius: 5px;
  box-shadow: 5px 5px 5px 5px;
  margin: 10px;
}
</style>